//管理路径
const paths = {
   html: {
      src: 'src/**/*.html',
      dest: 'dist'
   },
   css: {
      src: 'src/css/**/*.scss',
      dest: 'dist/css'
   },
   js: {
      src: 'src/js/**/*.js',
      dest: 'dist/js'
   },
   libs: {
      src: 'src/libs/**',
      dest: 'dist/libs'
   },
   imgs: {
      src: 'src/images/**',
      dest: 'dist/images'
   }
}

const gulp = require('gulp'),
   htmlmin = require('gulp-htmlmin'),
   uglify = require('gulp-uglify'), //压缩js的包
   babel = require('gulp-babel'), //ES6转ES5的包
   cleanCss = require('gulp-clean-css'), //压缩css
   autoPrefixer = require('gulp-autoprefixer'), //给需要兼容的css样式自动加上兼容性前缀
   connect = require('gulp-connect'), //服务器的包
   del = require('del'), //删除的包
   sass = require('gulp-sass')
   //需要跨域访问其他接口，则需要配置跨域
   // 引入包的同时直接解构出来使用
   const { createProxyMiddleware } = require('http-proxy-middleware') 
// 指定html任务：压缩html，从src里把html文件取出来，然后压缩，最后放进dist目录
const html = () => {
   return gulp.src(paths.html.src)
      .pipe(htmlmin({
         removeComments: true, //清除HTML注释
         collapseWhitespace: true, //压缩HTML
         collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
         removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
         removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
         removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
         minifyJS: true, //压缩页面JS
         minifyCSS: true //压缩页面CSS 
      }))
      .pipe(gulp.dest(paths.html.dest))
      .pipe(connect.reload()) //支持热更新

}
// 制定delDist任务：删除dist目录
const delDist = () => del('dist')
//制定js任务：先ES6转成ES5，再压缩
const js = () => {
   return gulp.src(paths.js.src)
      .pipe(babel({
         presets: ['@babel/env']
      }))
      .pipe(uglify())
      .pipe(gulp.dest(paths.js.dest))
      .pipe(connect.reload()) //支持热更新

}

// 制定css任务：先给css3一些样式加上前缀，再压缩css
const css = () => {
   return gulp.src(paths.css.src)
      .pipe(sass())
      .pipe(autoPrefixer({
         cascade: false
      }))
      .pipe(cleanCss())
      .pipe(gulp.dest(paths.css.dest))
      .pipe(connect.reload()) //支持热更新
}

// 制定libs任务：把libs的文件全部移动到dist目录
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))
// 制定imgs任务：把images的文件全部移动到dist目录
const imgs = () => gulp.src(paths.imgs.src).pipe(gulp.dest(paths.imgs.dest))
// 制定server任务：开启一个本地node服务器
const server = () => {
   connect.server({
      root: 'dist', // 项目根路径是dist
      livereload: true, // 服务器支持热更新
      port: 2008, // 配置端口号2333
      host:'::',
      // 中间件：函数返回一个数组，数组配置跨域代理
      middleware () {
         return[
            //将以/product为开头的请求代理到域 https://shopapi.smartisan.com
            createProxyMiddleware(['/product','/v1'],{
               target:'https://shopapi.smartisan.com',
               changeOrigin:true
            })
         ]
      }
   })
}
//监听html、js和css文件的变化，重启对应任务，在被监听的任务后面都要重启服务器
const watch = () =>{
   gulp.watch(paths.html.src, html)
   gulp.watch(paths.css.src, css)
   gulp.watch(paths.js.src, js)
}
module.exports.default = gulp.series(delDist, gulp.parallel(html, js, css, libs, imgs, libs, server,watch))